<template>
<div>

    <div class="wy-main-title wy-m-t-20" style="width:1200px;margin:0 auto;margin-top:20px;border:none;">
          <p>首页  /  物流信息服务  /   <span>{{names}}</span></p>
    </div>

     <!-- 其他选项 -->
        <div class="storage-city wei_storage-city" style="padding-top:20px;background:#f6f6f6;">
            <a-row class="storage-city-content container-1200">
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="选择城市:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                        <a-input style="height:40px;"  placeholder="请选择城市"  :value="departureCar" readOnly @click="magSvgShowMap('departureCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="选择行业:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                         <a-select  defaultValue="请选择行业" style="width: 190px;height:40px;">
                            <a-select-option value="水果">水果</a-select-option>
                            <a-select-option value="肉类">肉类</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                      <a-form-item label="关键字:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input style="height:40px;"  placeholder="请输入关键字"/>
                      </a-form-item>
                </a-col>
                <a-col :span='8'>
                    <a-button type="primary" :span='2' style='margin:0 20px 0 45px;' class='ant-btn-primary'>搜索</a-button>
                    <a-button :span='2'>重置</a-button>
                </a-col>
            </a-row>
        </div>
  <div class="goods-main-content wei_goods-main-content container-1200">


     <a-tabs @change="changeTab">
        <a-tab-pane tab="专家信息" key="1" >
          <div class="goods-information-list">
               <!-- 数据展示 -->
                  <div class="tender-list sell-goods-list">
                      <div class="tender-list-title">
                          <ul>
                              <li>专家信息</li>
                              <li>企业信息</li>
                              <li>查看</li>
                         </ul>
                      </div>
                     <!-- 数据列表 -->
                    <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                              <div class="invite-box-conent">
                                    <div class="goods-pic">
                                      <img :src="FileUploadUrl2+item.cargos[0]&&FileUploadUrl2+item.cargos[0].cargoPics.split(',')[0]">
                                    </div>
                                    <div class="goods-name">
                                        <h4>{{item.fromCity}}</h4>
                                        <div>
                                              <p>岗位：
                                                <span>{{item.cargos[0].cargoName}}</span>
                                                <span>/{{item.weight}}吨</span>
                                                <span>/{{item.volume}}立方米</span>
                                                <span v-if="item.type === 1">/零担</span>
                                                <span v-if="item.type === 2">/整车</span>
                                                <span v-if="item.type === 3">/同城</span>
                                              </p>
                                              <p>公司：
                                                <span v-if="item.type === 1">零担</span>
                                                <span v-if="item.type === 2">整车</span>
                                                <span v-if="item.type === 3">同城</span>
                                              </p>
                                              <p>擅长职业：
                                                  <span v-if="item.masterCargoType == 1">轻货</span>
                                                  <span v-if="item.masterCargoType == 2">重货</span>
                                              </p>
                                        </div>
                                    </div>
                              </div>
                              <div class="invite-box-conent">
                                    <h4>北京荣之联科技股份有限公司</h4>
                                    <div class="useStar">
                                        <span>用户星级</span>
                                        <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                                          <div class="attestaion">已认证</div>
                                    </div>
                              </div>
                              <div class="invite-box-conent">
                                    <a-button v-if="loggedIn" class='goods-sell' type="primary" @click="elasticShowModal">我要询价</a-button>
                                    <router-link v-if="!loggedIn" to="/login"><a-button  class='goods-sell' type="primary">我要询价</a-button></router-link>
                                    <nuxt-link :to="`/info/goods/${item.cargoId}`">
                                          <a-button class=' goods-detail'>查看详情</a-button>
                                    </nuxt-link>
                              </div>
                          </a-list-item>
                    </a-list>
                  </div>
          </div>
        </a-tab-pane>
         <a-tab-pane tab="金融服务" key="2" >
      <div style="height: 500px;width: 100%;text-align: center;font-size: 30px;margin: 0 auto;line-height: 500px;">
        <img src="./../../../static/img/index/no.jpg" alt="" style="width:100%;">
      </div>
        </a-tab-pane>
         <a-tab-pane tab="信用信息查询" key="3" >
           <div style="height: 500px;width: 800px;text-align: center;font-size: 30px;margin: 0 auto;line-height: 500px;">
        此功能即将开放....
      </div>
        </a-tab-pane>
      </a-tabs>
  </div>

       <!-- 弹框 -->
    <Elastic :type="type"  ref='elastic'></Elastic>
    <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from './../../../components/dialog/Elastic'
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'

export default {
  mixins: [ AuthMixin ],
    components: {
      Elastic,
    },
  data () {
      return {
          // 起运地地址
        departureCar: '',
        names:'专家信息',
        destinationCar: '',
        departureSupply: '',
        destinationSupply: '',
        departureStorage: '',
        destinationStorage: '',
        FileUploadUrl2:environment.FileUploadUrl2,
        // 数据列表
        listData: [],
        type: '',
        city: '',
        fromCity:  '',
        toCity: '',
        masterCargoType: '',
        volumeSource: '',//货物体积
        weightSource: '',//货物重量
        // 表格分页
        pagination: {
          pageSizeOptions: ['10', '20', '30', '50', '100'],
          current: 1,
          pageSize: 10,
          // showSizeChanger: true,
          total: 0,
          showTotal: (total, range) => `共 ${total} 条记录`
      },
        // 热门城市
        cityTab: [ '','昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄市','个旧市','文山市','景洪市','大理市','瑞丽市','泸水市','香格里拉'],
      }
  },
  beforeCreate() {
    // this.formCar = this.$form.createForm(this);
  },
  created: function() {
    this.infoGoodsGetCargoByType();
  },
  methods:{
    // 城市查询
    cityClick (city) {
      this.city = city;
      this.departureCar = city;
      this.infoGoodsGetCargoByType();
    },
    // 运输类型
    typeClick (type) {
      this.type = type;
      this.infoGoodsGetCargoByType();
    },
    // 货源类型
    huowuChange (value) {
      this.masterCargoType = value;
      // this.infoGoodsGetCargoByType();
    },
    // 重量类型
    zhonglianChange (value) {
      this.weightSource = value;
      // this.infoGoodsGetCargoByType();
    },
    // 体积类型
    tijiChange (value) {
      this.volumeSource = value;
      // this.infoGoodsGetCargoByType();
    },
    // 获取货源分类列表查询
    async infoGoodsGetCargoByType () {
      const res = await this.$store.dispatch('info/infoGoodsGetCargoByType',{
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.current,
        type: this.type,
        fromCity: this.city,
        toCity: this.toCity,
        masterCargoType: this.masterCargoType,
        volumeSource: this.volumeSource,
        weightSource: this.weightSource
      })
      if (res.status) {
        this.listData = res.data.rows;
        this.pagination.total = res.data.total;//数据总数
      } 
    },
    // 重置
    reset(){
      this.departureCar = '';//出发地
      this.destinationCar = '';//到达地
      this.masterCargoType = '';//货源类型
      this.type = '';//运输类型
      this.city = '';//城市
      this.volumeSource = '';//货物体积
      this.weightSource = '';//货物重量
      this.infoGoodsGetCargoByType();
    },
    // 弹框
    elasticShowModal(){
         this.$refs.elastic.showModal();
    },
       // 省市地图回调
    mapSvgCall (d) {
      this[d.name] = d.city;
      if(d.name=='departureCar'){
        this.city = d.city;
        // this.infoGoodsGetCargoByType();
      }
      if(d.name=='destinationCar'){
        this.toCity = d.city;
        // this.infoGoodsGetCargoByType();
      }
    },
    changeTab(key){
      if(key == 1){
        this.names = '专家信息'
      }else if(key == 2){
        this.names = '金融服务'
      }else{
        this.names = '信用信息查询'
      }
    },
    // 起运地
    magSvgShowMap (name) {
      this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
    },
    // 调用距离返回
    distanceCall (num) {
    }
  }
}

</script>
<style lang="scss">
@import "./../../../assets/css/info/goodsinfromation.scss";
.wei_storage-city{
   .ant-select-selection--single{
    height: 40px;
    .ant-select-selection__rendered{
      line-height: 40px;
    }
  }
}

.wei_goods-main-content {
  .goods-city-choose{
    background: #f6f6f6;
    height: 90px;
    margin-bottom: 20px;
  }
  .goods-information-list{
    .invite-box-conent{
      .goods-sell{
        margin-top: 34px;
      }
    }
  }
}
</style>